<script setup>
    import { sdCityList } from '@/utils/index'
    import { ElMessage } from 'element-plus'
    import { getPlacementList, placementDelete } from '@/common/apis'
    import AddData from './AddData.vue'
    import AddPlacement from './AddPlacement.vue'
import { nextTick } from 'vue'

    const tabbarData = ['未安置', '已安置']
    let current = $ref(0)
    
    // 列表
    let resData = $ref([])

    // 总条数
    let totalCount = $ref(0)

    // 筛选
    let filterParams = $ref({
        pageNo: 1,
        pageSize: 20,
    })

    // 列表数据加载中
    let dataLoading = $ref(false)

    let data1 = [
        { name: '李玉艳', s2: '女', s3: '汉', personGenre: '就业困难的失业人员', s6: '低保户', idCard: '370421********1266', s7: '3704214567998321' },
        { name: '明守富', s2: '男', s3: '汉', personGenre: '就业困难的失业人员', s6: '低保户', idCard: '370421********1214', s7: '3704214564293478' },
        { name: '秦庆霞', s2: '女', s3: '汉', personGenre: '就业困难的失业人员', s6: '低保户', idCard: '370481********0946', s7: '3704214567596734' }
    ]

    let data2 = [
    { name: '秦霞', personGenre: '就业困难的失业人员', monadName: '济南市历下区姚家街道办事处社区服务中心', idCard: '370421********2223',   useMonadName: '济南市历下区姚家街道总工会', postName: '社区网格员', postContacts: '刘黎', contractStartTime: '2022-01-23', contractEndTime: '2024-01-23' },
    { name: '倪国晶', personGenre: '就业困难的失业人员', monadName: '济南市历下区姚家街道办事处社区服务中心', idCard: '370421********0330', useMonadName: '济南市历下区姚家街道总工会', postName: '社区网格员', postContacts: '刘黎', contractStartTime: '2022-04-06', contractEndTime: '2024-04-06' },
    { name: '贾真真', personGenre: '就业困难的失业人员', monadName: '济南市历下区姚家街道办事处社区服务中心', idCard: '370421********1260', useMonadName: '济南市历下区姚家街道总工会', postName: '社区网格员', postContacts: '刘黎', contractStartTime: '2022-07-12', contractEndTime: '2024-07-12' }
    ]


    const getList = () => {
        dataLoading = true

        // getPlacementList(filterParams).then(res => {
        //     dataLoading = false
        //     if(res.success){
        //         let { records, total } = res.result

        //         resData = records
        //         totalCount = total
        //     }
        // })

        setTimeout(() => {
            dataLoading = false
            
            if(current){
                resData = data2
            }else {
                resData = data1
            }

            totalCount = resData.length
        }, 300);
    }
    getList()

    // 分页
    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getList()
    }

    const handleSizeChange = (size) => {
        filterParams.pageSize = size
        getList()
    }

    // 搜索
    const hadleSearch = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 重置
    const handleClickReset = () => {
        filterParams = {
            pageNo: 1,
            pageSize: 20
        }
    }

    let addData = $ref(null)

    // 新增
    const addSuccess = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 删除
    const clickDelete = (index) => {
        // placementDelete({ id }).then(res => {
        //     if(res.success){
        //         ElMessage.success('删除成功~')
        //         getList()
        //     }else{
        //         ElMessage.error(res.message)
        //     }
        // })
        resData.splice(index, 1)
        ElMessage.success('删除成功~')
    }

    // 安置
    const clickPlacement = (data) => {
        addPlacement.showAddDialog(data, 'placement')
    }
    
    let azIndex = $ref(0)

    let addPlacement = $ref(null)

    const addSuccess2 = (data) => {
        console.log(data, azIndex)
        data2.unshift(data)

        data1.splice(azIndex, 1)
        resData = []
        nextTick(() => {
            resData = data1
        })
    }

</script>

<template>
    <div class="top-tabbar-wrap">
        <div 
            class="tabbar-item"
            v-for="(item, index) in tabbarData"
            :key="index"
            :class="{ active: current == index }"
            @click="current = index; getList()"
        >
            {{ item }}
        </div>
    </div>
    <div class="health-search">
        <div class="health-search-form-warp dz-filter-wrap">
            <el-form 
                :model="filterParams" 
                :inline="true"
                :label-width="105"
                class="mt10"
            >
                <el-form-item label="所属市">
                    <el-select v-model="filterParams.sysOrgCode" placeholder=" " clearable @clear="delete filterParams.sysOrgCode">
                        <el-option
                            v-for="(item, index) in sdCityList"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="filterParams.name"></el-input>
                </el-form-item>
                <el-form-item label="人员类别">
                    <el-input v-model="filterParams.type"></el-input>
                </el-form-item>

                <div class="btn-wrap flex-center">
                    <div class="btn reset" @click="handleClickReset">重置</div>
                    <div class="btn search" @click="hadleSearch">查询</div>
                </div>
            </el-form>

        </div>

         <!-- 查询结果 -->
        <div class="search-result mt10" v-loading="dataLoading" v-if="current==0">
            <div class="result-title flex-between">
                <div>
                    查询结果
                    <span class="result-count">共{{ totalCount }}条</span>
                </div>
                <!-- <div class="add-btn" @click="addData.showAddDialog({}, 'add')">添加</div> -->
            </div>
            
            <el-table 
                :data="resData" 
                style="width: 100%"
                height="530"
                size="large"
                class="dz-table"
                :scrollbar-always-on="true"
            >
                <el-table-column type="index" label="序号" min-width="60" align="center" />
                <el-table-column prop="name" label="姓名" min-width="90" align="center" />
                <el-table-column prop="s2" label="性别" min-width="90" align="center" />
                <el-table-column prop="s3" label="民族" min-width="90" align="center" />
                <el-table-column prop="personGenre" label="人员类型" min-width="200" />
                <el-table-column prop="idCard" label="身份证号码" min-width="180" />
                <el-table-column prop="s6" label="困难类别" min-width="180" />
                <el-table-column prop="s7" label="就失业登记号" min-width="180" />
                <el-table-column prop="v6" label="操作" min-width="200" align="center">
                    <template #default="scope">
                        <div class="table-operation flex-center">
                            <span v-if="current == 0" @click="clickPlacement(scope.row); azIndex=scope.$index">安置</span>
                            <template v-else>
                                <span @click="addData.showAddDialog(scope.row, 'edit')">修改</span>
                                <el-popconfirm title="确定要删除此条数据吗?" @confirm="clickDelete(scope.row.id)">
                                    <template #reference>
                                        <span>删除</span>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination 
                class="mt20" 
                background 
                layout="total, sizes, prev, pager, next" 
                :total="totalCount" 
                :page-size="filterParams.pageSize"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />

        </div>

        <!-- 查询结果 -->
        <div class="search-result mt10" v-loading="dataLoading" v-if="current==1">
            <div class="result-title flex-between">
                <div>
                    查询结果
                    <span class="result-count">共{{ totalCount }}条</span>
                </div>
                <!-- <div class="add-btn" @click="addData.showAddDialog({}, 'add')">添加</div> -->
            </div>
            
            <el-table 
                :data="resData" 
                style="width: 100%"
                height="530"
                size="large"
                class="dz-table"
                :scrollbar-always-on="true"
            >
                <el-table-column type="index" label="序号" min-width="60" align="center" />
                <el-table-column prop="name" label="姓名" min-width="90" align="center" />
                <el-table-column prop="personGenre" label="人员类型" min-width="200" />
                <el-table-column prop="idCard" label="身份证号码" min-width="180" />
                <el-table-column prop="monadName" label="设岗单位名称" min-width="320" />
                <el-table-column prop="useMonadName" label="用岗单位名称" min-width="320" />
                <el-table-column prop="postName" label="岗位名称" min-width="140" />
                <el-table-column prop="postContacts" label="岗位联系人" min-width="90" />
                <el-table-column prop="contractStartTime" label="合同起始时间" min-width="130" align="center" />
                <el-table-column prop="contractEndTime" label="合同终止时间" min-width="130" align="center" />
                <el-table-column prop="v6" label="操作" min-width="200" align="center">
                    <template #default="scope">
                        <div class="table-operation flex-center">
                            <span v-if="current == 0" @click="addData.showAddDialog(scope.row, 'edit')">安置</span>
                            <template v-else>
                                <span @click="addData.showAddDialog(scope.row, 'edit')">修改</span>
                                <el-popconfirm title="确定要删除此条数据吗?" @confirm="clickDelete(scope.$index)">
                                    <template #reference>
                                        <span>删除</span>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination 
                class="mt20" 
                background 
                layout="total, sizes, prev, pager, next" 
                :total="totalCount" 
                :page-size="filterParams.pageSize"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />

        </div>
    </div>

    <add-data ref="addData" @addSuccess="addSuccess"></add-data>

    <!-- 安置 -->
    <add-placement ref="addPlacement" @addSuccess="addSuccess2"></add-placement>

</template>
